import React, { useEffect } from 'react'
import { Button, Form, Modal, Input } from 'antd'
import TextArea from 'antd/es/input/TextArea'

function Edit(props) {
  const [defaultValue] = React.useState({})
  const [form] = Form.useForm();

  useEffect(() => {
    if (props.visible) {
      form.setFieldsValue(props.current)
    }
  }, [props.visible])

  function onFinish(values) {
    let data = Object.assign(props.current, values)
    props.onSave(data)
  }

  return (
    <Modal open={props.visible} onCancel={props.onCancel} title={'编辑'} footer={null}>
      <Form onFinish={onFinish} initialValues={defaultValue} form={form}>
        <Form.Item label={'账号'} name={'username'}>
          <Input></Input>
        </Form.Item>
        <Form.Item label={'密码'} name={'password'}>
          <Input></Input>
        </Form.Item>
        <Form.Item label={'备注'} name={'tip'}>
          <TextArea />
        </Form.Item>
        <Form.Item label={null} className={'text-right'}>
          <Button type="primary" htmlType="submit">
            确认
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default Edit
